<template>
    <view class="pagination">
      <!-- 上一页按钮 -->
      <button class="btn" @click="prevPage" :disabled="currentPage === 1">《</button>
  
      <!-- 当前页/总页 -->
      <picker mode="selector" :range="pageArray" @change="onPickerChange">
        <view class="pnum">{{ currentPage }} / {{ totalPages }}</view>
      </picker>
  
      <!-- 下一页按钮 -->
      <button class="btn" @click="nextPage" :disabled="currentPage === totalPages">》</button>
    </view>
  </template>
  
  <script>
  export default {
    props: {
      total: { // 总数据条数
        type: Number,
        required: true
      },
      pageSize: { // 每页显示的数据条数
        type: Number,
        default: 30
      }
    },
    data() {
      return {
        currentPage: 1, // 当前页码
        pageArray: [] // 用于picker的选择数组
      };
    },
    computed: {
      totalPages() {
        return Math.ceil(this.total / this.pageSize);
      }
    },
    watch: {
      totalPages(newVal) {
        this.pageArray = Array.from({ length: newVal }, (_, i) => i + 1);
      }
    },
    methods: {
      prevPage() {
        if (this.currentPage > 1) {
          this.currentPage--;
          this.emitChange();
        }
      },
      nextPage() {
        if (this.currentPage < this.totalPages) {
          this.currentPage++;
          this.emitChange();
        }
      },
      onPickerChange(e) {
        const selectedPage = parseInt(e.detail.value) + 1; // picker从0开始计数
        if (selectedPage !== this.currentPage) {
          this.currentPage = selectedPage;
          this.emitChange();
        }
      },
      emitChange() {
        this.$emit('change', this.currentPage);
      }
    }
  };
  </script>
  
  <style scoped>
  .pagination {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .pnum {
    font-size: 16px;
    font-weight: bold;
    padding: 10rpx 20rpx;
  }
  .btn{
    transform: scale(0.8);
  }
  </style>